<template>
    <div class="operation">
        <el-row>
            <el-col :span="4" :offset="14">
                <el-date-picker
                        size="medium"
                        type="date"
                        placeholder="请输入日期"
                        v-model="inputDate">
                </el-date-picker>
            </el-col>
            <el-col :span="4">
                <el-input
                        size="medium"
                        placeholder="请输入员工姓名"
                        v-model="inputName">
                </el-input>
            </el-col>
            <el-col :span="2" style="text-align: right">
                <el-button type="primary" size="medium" icon="el-icon-search" @click="selectOperation">搜索</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="min-height: 316px">
                <el-table
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj"
                        :data="currentData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="logTime"
                            label="操作日期">
                    </el-table-column>
                    <el-table-column
                            prop="logStaff"
                            label="操作员">
                    </el-table-column>
                    <el-table-column
                            prop="logType"
                            label="操作内容">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div class="pages">
                    <paging :obj = 'pagingData'></paging>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "staffOperationLogPage",
        data() {
            return {
                row:5,
                pageNums:2,
                inputDate:'',
                inputName:'',
                pageData:[],
                currentPage:1,
                operation: {userName:this.$store.state.user.userName, operationDate:'', operationMessage:''},
            };
        },
        components:{

        },
        computed:{
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num//改变当前页
                        let obj ={
                            pageCount:5,
                            pageSize:that.currentPage,
                        }
                        that.getPageLog(obj)
                            .then(resp=>{
                                that.pageData = resp.logEntityList
                                that.pageNums = resp.totalPage
                            })
                            .catch(err=>{
                                console.log(err)
                            })
                    },
                    pageCount:that.pageNums,//一共多少页
                }
                return data
            },
            currentData(){
                return this.pageData
            }

        },
        methods:{
            ...mapActions(['getPageLog','userOperation','selectPageLog']),
            selectOperation(){
                if(this.inputDate === ''&& this.inputName === ''){
                    this.$message.error('员工或日期不能为空！')
                }else {
                    console.log(this.inputDate)
                    let obj ={
                        name:this.inputName,
                        startTime:this.inputDate,
                        pageCount:5,
                        pageSize:1,
                    }
                    this.selectPageLog(obj)
                        .then(resp=>{
                            if(resp.Code === 200){
                                this.pageData = resp.logEntityList
                                this.pageNums = resp.totalPage
                                this.operation.operationMessage = '查询员工操作日志'
                                this.operation.operationDate = this.$store.state.nowTime.time
                                this.userOperation(this.operation)
                            }else if(resp.Code === 400){
                                this.$message.error('查询失败！');
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }
            }
        },
        mounted() {
            let obj ={
                pageCount:5,
                pageSize:1,
            }
            this.getPageLog(obj)
                .then(resp=>{
                    if(resp.Code === 200){
                        this.pageData = resp.logEntityList
                        this.pageNums = resp.totalPage
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
        }
    }
</script>

<style scoped lang="less">
    .operation{
        margin-top: 20px;
        .el-row{
            .el-col{
                text-align: center;
                .pages{
                    margin-top: 20px;
                    text-align: center;
                }
                .el-input{
                    width: 80%;
                }
            }
            .el-table{
                margin: 20px auto 0;
            }
        }
        .el-dialog{
            span{
                display: inline-block;
                text-align: center;
                width: 100%;
            }
        }
    }
</style>